<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 设置初始缩放比例为1.0，使用设备宽度  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <!-- 在iOS下开启全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 隐藏 Sarafi 状态栏  -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <!-- 离线应用的另一个技巧 -->
    <meta name=”apple-mobile-web-app-status-bar-style” content=black” />
    <!-- 隐藏状态栏 -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <!-- 指定的iphone中safari顶端的状态条的样式 -->
    <meta content="telephone=no" name="format-detection" />
    <!-- 告诉设备忽略将页面中的数字识别为电话号码 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

</head>

<body>
    <!-- 导航部分 -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
            <!-- <a class="navbar-brand logo"></a>  -->
            <a class="navbar-toggle" data-toggle="collapse" href="#menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            </div>
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">新闻</a>
                    </li>
                    <li>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="">菜单<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">呼伦贝尔大草原</a></li>
                            <li class="bdline"><a href="#">漠河的日出</a></li>
                            <li class="bdline"><a href="#">大兴安岭</a></li>
                            <li class="bdline"><a href="#">猛犸公园</a></li>
                            <li class="bdline"><a href="#">白桦林</a></li>
                            <li class="bdline"><a href="#">阿尔山</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a>简体中文</a>
                    </li>
                    <li>
                        <a class="clickable" data-toggle="dropdown">登录</a>
                        <div class="dropdown-menu">
                            <div class="login-menu">
                                <h4>用户登录</h4>
                                <form action="" class="pd10">
                                    <div class="form-group">
                                        <input class="form-control" id="uname" type="text" placeholder="请输入用户名">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" id="psword" type="text" placeholder="请输入密码">
                                    </div>
                                    <div>
                                        <a href="" class="navbar-right fgpd">忘记密码</a>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn btn-primary">登录</button>
                                    </div>
                                    <div>
                                        <a href="" class="navbar-right fgpd">注册用户</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" action="">
                    <div class="form-group has-feedback">
                        <label class="sr-only" for="search">搜索</label>
                        <input class="form-control" id="search" type="text" placeholder="请输入">
                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                </form>
                <span class="navbar-text navbar-right">|</span>
                <a class="navbar-right navbar-text navbar-link">查找内容</a>

            </div>
        </div>
    </div>
    <!-- 轮播 -->
    <div class="carousel slide" id="myCarousel" data-ride="carousel">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/aa.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/bb.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/cc.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/dd.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/ee.jpg" alt="">
            </div>
        </div>
       <a id="carleft" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a id="carright" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
    </div>
    <!-- 主体部分 -->
    <div class="main">
        <div class="container">
        <h2>欢迎欣赏盛世美景</h2>
            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <div class="bg-color">
                        <img class="img-responsive" src="img/2a.jpg" alt="">
                        <div class="bg-con">
                            <span>浙江杭州</span>
                            <p>放慢生活的脚步，你会发现更多的美,倾听更多大自然美妙的声音</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xs-12">
                    <div class="row">
                        <div class="col-md-12 col-sm-6 col-xs-12">
                            <div>
                                <img class="img-responsive" src="img/dy.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-6 col-xs-12">
                            <div>
                              <div class="media">
                                <div class="media-left">
                                  <img class="fd-img" src="img/de.jpg" alt=""/>
                                </div>
                                <div class="media-body">
                                  <ul class="list-unstyled">
                                    <li><a href="#">距哈达202KM</a></li>
                                    <li><a href="#">距漠河307米</a></li>
                                    <li><a href="#">距莫尔道嘎84KM</a></li>
                                    <li><a href="#">距白鹿岛84KM</a></li>
                                    <li><a href="#">距这些地方十万八千里</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
              <div class="col-md-8 col-md-push-4 col-xs-12">
                <div class="bg-color">
                  <img class="img-responsive" src="img/me.jpg" alt=""/>
                   <div class="bg-con djbg">
                      <h4>登高望远</h4>
                      <a class="navbar-right glyphicon glyphicon-chevron-up"></a>
                      <h5 class="djfd">你以什么样的眼光看世界,世界就是什么样</h5>
                  </div>
                </div>
              </div>
              <div class="col-md-4 col-md-pull-8 col-xs-12">
                <div class="row">
                  <div class="col-md-12 col-sm-6 col-xs-12">
                    <div>
                      <img class="img-responsive" src="img/dw.jpg" alt=""/>
                    </div>
                  </div>
                  <div class="col-md-12 col-sm-6 col-xs-12">
                    <ul class="list-unstyled">
                      <li><a href="#">Javascript</a></li>
                      <li><a href="#">Bootstarp</a></li>
                      <li><a href="#">Jquery</a></li>
                      <li><a href="#">Less</a></li>
                      <li><a href="#">Ajax</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
           <div class="row">
            <div class="col-md-8 col-xs-12">
                <div>
                  <img class="img-responsive" src="img/dt.jpg" alt=""/>
                </div>
            </div>
              <div class="col-md-4 col-xs-12">
                <div class="row">
                  <div class="col-md-12 col-sm-6 col-xs-12">
                    <div>
                      <img class="img-responsive" src="img/hd.jpg" alt=""/>
                    </div>
                  </div>
                  <div class="col-md-12 col-sm-6 col-xs-12">
                    <ul class="list-unstyled">
                      <li><a href="#">熟练使用jQuery类库;</a></li>
                      <li><a href="#">熟练使用DIV+CSS对网页的布局;</a></li>
                      <li><a href="#">熟悉Bootstrap框架构建响应式网页;</a></li>
                      <li><a href="#">熟练使用PS进行切图;</a></li>
                      <li><a href="#">熟悉H5的应用知识;</a></li>
                      <li><a href="#">熟悉WebStorm、Sublim Atom等开发工具;</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="row">
          <div class="col-sm-6">
            <h3>关于旅游</h3>
            <ul class="list-unstyled">
              <li><a href="#">青海湖</a></li>
              <li><a href="#">茶卡盐湖</a></li>
              <li><a href="#">塔尔寺</a></li>
              <li><a href="#">坎布拉森林</a></li>
              <li><a href="#">拉圾山（海拔4200+）</a></li>
              <li><a href="#">祁连大草原</a></li>
            </ul>
          </div>
          <div class="col-sm-6">
            <h3>关于美食</h3>
            <ul class="list-unstyled">
              <li><a href="#">手抓羊肉</a></li>
              <li><a href="#">手撕牛肉</a></li>
              <li><a href="#">羊肉泡馍</a></li>
              <li><a href="#">烤羊肉串</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-sm-12">
        <div class="row">
          <div class="col-sm-6">
            <h3>关于运动</h3>
            <ul class="list-unstyled">
              <li><a href="#">爬山</a></li>
              <li><a href="#">骑行</a></li>
              <li><a href="#">毅行</a></li>
              <li><a href="#">夜跑</a></li>
            </ul>
          </div>
          <div class="col-sm-6">
            <h3>联系我</h3>
            <ul class="list-unstyled">
              <li><a href="#">邮箱：mandeling_hu@sina.com</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/index.js"></script>
    <script>
        var s = document.createElement('script');
        s.onload = function() {
            bootlint.showLintReportForCurrentDocument([]);
        }
        /* s.src = 'js/bootlint.js';
         document.body.appendChild(s);*/
    </script>
</body>

</html>
